<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user-info">
      <view class="avatar-box" @tap="navigateToAvatar">
        <image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
        <view class="edit-icon">
          <uni-icons type="camera-filled" size="20" color="#fff"></uni-icons>
        </view>
      </view>
      <view class="info">
        <text class="nickname">{{userInfo.nickname || '未登录'}}</text>
        <text class="id" v-if="userInfo.id">ID: {{userInfo.id}}</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-group">
        <view class="menu-item" @tap="navigateToCollect">
          <view class="left">
            <uni-icons type="star" size="24" color="#1890ff"></uni-icons>
            <text>我的收藏</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
        <view class="menu-item" @tap="navigateToOrder">
          <view class="left">
            <uni-icons type="list" size="24" color="#1890ff"></uni-icons>
            <text>我的订单</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @tap="navigateToApply">
          <view class="left">
            <uni-icons type="person" size="24" color="#1890ff"></uni-icons>
            <text>申请入驻</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
        <view class="menu-item" @tap="navigateToWithdraw">
          <view class="left">
            <uni-icons type="wallet" size="24" color="#1890ff"></uni-icons>
            <text>提现佣金</text>
          </view>
          <view class="right">
            <text class="amount">¥{{userInfo.balance || '0.00'}}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @tap="navigateToMessage">
          <view class="left">
            <uni-icons type="chat" size="24" color="#1890ff"></uni-icons>
            <text>在线留言</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
        <view class="menu-item" @tap="navigateToAbout">
          <view class="left">
            <uni-icons type="info" size="24" color="#1890ff"></uni-icons>
            <text>关于我们</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-btn" @tap="handleLogout" v-if="userInfo.id">
      退出登录
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        id: '',
        nickname: '',
        avatar: '',
        balance: '0.00'
      }
    }
  },
  onShow() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      // TODO: 加载用户信息
      // 模拟数据
      this.userInfo = {
        id: '10086',
        nickname: '张三',
        avatar: '/static/images/图片素材/律师1.jpg',
        balance: '1234.56'
      }
    },
    navigateToAvatar() {
      uni.navigateTo({
        url: '/pages/mine/avatar'
      })
    },
    navigateToCollect() {
      uni.navigateTo({
        url: '/pages/mine/collect'
      })
    },
    navigateToOrder() {
      uni.navigateTo({
        url: '/pages/mine/order'
      })
    },
    navigateToApply() {
      uni.navigateTo({
        url: '/pages/mine/apply'
      })
    },
    navigateToWithdraw() {
      uni.navigateTo({
        url: '/pages/mine/withdraw'
      })
    },
    navigateToMessage() {
      uni.navigateTo({
        url: '/pages/mine/message'
      })
    },
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/mine/about'
      })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 调用退出登录接口
            uni.clearStorageSync()
            uni.reLaunch({
              url: '/pages/login'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #fff;
  
  .avatar-box {
    position: relative;
    margin-right: 30rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
    
    .edit-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 40rpx;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .info {
    flex: 1;
    
    .nickname {
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .id {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
}

.menu-list {
  margin-top: 20rpx;
  
  .menu-group {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .left {
        display: flex;
        align-items: center;
        
        text {
          font-size: 28rpx;
          margin-left: 20rpx;
        }
      }
      
      .right {
        display: flex;
        align-items: center;
        
        .amount {
          font-size: 28rpx;
          color: #f5222d;
          margin-right: 10rpx;
        }
      }
    }
  }
}

.logout-btn {
  margin: 40rpx 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #f5222d;
}
</style>
